<template>
  <h3>自定义指令(custom directive) - 函数式+对象式</h3>

  <button @click="num++">加一</button>
  <span>&nbsp;&nbsp;当前数值是: {{num}},</span>
  <span>&nbsp;&nbsp;放大后的值: </span>
  <span v-expand="num"></span>
  <br>
  <div>初次进入页面焦点应该在下面的输入框中:</div>
  <input type="number" v-focus v-model="num">
  <hr>

  <p>
    说明: <br>
    有时需要对普通 DOM 元素进行底层操作，这时候就会用到 Vue 自定义指令。<br>
    1. 函数式简写指令在mounted 和 updated 时触发.<br>
    2. 对象式指令则提供了 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 这几个钩子函数.<br>
    3. 全局指令则可以调用 app 的 directive 方法来注册.<br>
    官方文档: <a href="https://v3.cn.vuejs.org/guide/custom-directive.html"><b>自定义指令</b></a>
  </p>
</template>

<script>
import {ref} from 'vue'

export default {
  directives: {
    //函数式 (mounted 和 updated 时触发)
    expand(el, binding) {
      el.innerHTML = binding.value * 10
    },
    //对象式,各钩子函数可以有第二个参数binding
    focus: {
      mounted(element) {
        console.log('set focus.')
        element.focus()
      }
    }
  },
  setup() {
    let num = ref(1)
    return {num}
  },
}
</script>